<script setup>
import { Edit, Calendar } from '@element-plus/icons-vue'
import { ref } from 'vue'
// import ChannelSelect from '@/views/article/components/ChannelSelect.vue'
import SeeWorkload from './components/see_workload.vue'
import ConfirmModifyWork from './components/confirm_modify_work.vue'
import { dayjs } from 'element-plus'
import request from '@/utils/request'
//定义请求参数对象
const params = ref({
  // 第一页
  pagenum: 1,
  // 每页5条
  pagesize: 10,
  cate_id: '',
  name: '',
  work_month_value: dayjs().format('YYYY-MM')
})
//每月任务量数组
const TaskAmountList = ref([])
const total = ref(0) // 总条数
//请求任务量接口
const getTaskAmountmothods = () => {
  request({
    url: '/task_allocation/page',
    method: 'post',
    data: {
      month: dayjs(params.value.work_month_value).format('MM'),
      pageQuery: {
        limit: params.value.pagesize,
        page: params.value.pagenum
      },
      userName: params.value.name,
      year: dayjs(params.value.work_month_value).format('YYYY')
    }
  })
    .then((res) => {
      console.log('res', res)
      TaskAmountList.value = res.data
      total.value = res.total
    })
    .catch(() => {})
}
getTaskAmountmothods()

// 处理分页逻辑
const onSizeChange = (size) => {
  // 每页条数变化了，正在访问的当前页意义不大，数据不在原来那一页
  //从第一页渲染即可
  params.value.pagenum = 1
  //更改每页条数
  params.value.pagesize = size
  getTaskAmountmothods()
}
//更新当前页
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getTaskAmountmothods()
}

// 查看弹窗
const see_workload_dialog = ref()
// 编辑
const onCheckWorkAmount = (row, time) => {
  let data = {
    ...row,
    time: time
  }
  see_workload_dialog.value.open(data)
}

// 修改 确认 弹窗
const confirm_modify_dialog = ref()
// 打开编辑弹窗
const onConfirmModifyWay = (row, type) => {
  let data = {
    ...row,
    type: type
  }
  confirm_modify_dialog.value.open(data)
}
// 回显刷新
const onSuccess = () => {
  getTaskAmountmothods()
}
const query = () => {
  getTaskAmountmothods()
}
const onReset = () => {
  params.value.pagenum = 1
  params.value.name = ''
  params.value.work_month_value = dayjs().format('YYYY-MM')
  getTaskAmountmothods()
}
</script>
<template>
  <page-container title="任务管理">
    <!-- 具名插槽写按钮 -->
    <template #extra>
      <!-- <el-button type="primary" > 添加任务 </el-button> -->
      <!-- <el-button type="primary" > 一键评级 </el-button> -->
    </template>
    <!-- 表单区域 inline：在一行中显示-->
    <el-form inline>
      <!-- el-form-item 一行 -->
      <el-form-item label="姓名：">
        <!-- 下拉菜单和上面 params 绑定 -->
        <el-input v-model="params.name" placeholder="姓名" />
      </el-form-item>
      <!-- <el-form-item label="部门：">
        <channel-select style="width: 240px" v-model="params.cate_id"></channel-select>
      </el-form-item> -->
      <el-form-item label="月份：">
        <el-date-picker
          v-model="params.work_month_value"
          :editable="false"
          :clearable="false"
          type="month"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="query" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="TaskAmountList" style="width: 100%" height="500">
      <!-- 作用域插槽，可以自己拿到想要的数据 -->
      <el-table-column label="员工姓名" width="200">
        <template #default="{ row }">
          <!-- el-link 链接效果 -->
          <el-link type="primary" :underline="false">{{
            row.userName
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="月份">
        <template #default="{ row }">
          {{ row.year + '-' + row.month }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="部门" prop="cate_name"></el-table-column> -->
      <el-table-column
        label="当月工作量（平方公里）"
        prop="workloads"
      ></el-table-column>
      <el-table-column
        label="当月完成量（平方公里）"
        prop="committedWorkloads"
      ></el-table-column>
      <el-table-column
        label="确认完成量（平方公里）"
        prop="confirmedWorkloads"
      ></el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="{ row }">
          <el-popover
            placement="top"
            :width="200"
            trigger="hover"
            content="查看每日提交工作量"
          >
            <template #reference>
              <el-button
                :icon="Calendar"
                circle
                plain
                type="primary"
                @click="onCheckWorkAmount(row, params.work_month_value)"
              ></el-button>
            </template>
          </el-popover>
          <el-popover
            placement="top"
            :width="200"
            trigger="hover"
            content="修改员工工作量"
          >
            <template #reference>
              <el-button
                :icon="Edit"
                circle
                plain
                type="primary"
                @click="onConfirmModifyWay(row, 'upd')"
              ></el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[10, 20, 50, 100]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 25px; justify-content: flex-end"
    />
    <SeeWorkload ref="see_workload_dialog" />
    <ConfirmModifyWork @success="onSuccess" ref="confirm_modify_dialog" />
  </page-container>
</template>
<style lang="scss" scoped></style>
